<template>
    <div class="note-class-wrapper">
        <div class="note-class" :class="{hide:isShowMenu}">
            <header>
                <div @click="isShowMenu=true">
                    <van-icon name="wap-nav" />
                </div>
                <div>
                    <van-icon name="edit" @click="goNotePublish" />
                    <van-icon name="like-o" />
                    <van-icon name="search" />
                </div>
            </header>
            <section>
                <div class="note-item" v-for="(item,index) in noteClassList":key="index"
                :style="`background-color:${item.bgColor}`"
                @click="goNoteList(item.title)"
                >
                    <span class="title">{{ item.title }}</span>
                </div>
            </section>
        </div> 
        <!-- menu -->
         <!-- 什么时候拥有hidden就触发 -->
         <Menu class="menu" @hidden="handle" :class="{show:isShowMenu}" />

    </div>
</template>
<script setup>
// import axios from '@/api';
// axios.post('/user/home').then(res=>{
//     console.log(res);
// })
import Menu from '@/components/Menu.vue'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();//路由的实例对象

const noteClassList = [
  { bgColor: '#f0aa84', title: '美食' },
  { bgColor: '#dcf189', title: '旅行' },
  { bgColor: '#e0c2f1', title: '恋爱' },
  { bgColor: '#c2ebf1', title: '学习' },
  { bgColor: '#949c9d', title: '吵架' }
]
const isShowMenu=ref(false)
const handle=(e)=>{
    isShowMenu.value=e
}
const goNoteList=(title)=>{
    router.push({path:'/noteList',query:{title:title}})//通过path来跳路经，通过query来传参
}
const goNotePublish=()=>{
    router.push({path:'/notePublish'})
}

</script>

<style lang="less" scoped>
.note-class-wrapper {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    .note-class{
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 0 0.5866rem;
        box-sizing: border-box;
        overflow-y: scroll;
        transform: translateX(0%);
        transition: transform 0.3s;
        &.hide{
            transform: translateX(100%);
        }
        header{
            display: flex;
            justify-content: space-between;
            height: 1.2rem;
            align-items: center;
            margin: 10px 0;
            .van-icon{
                font-size: 28px;
                margin: 0 5px;
            }
        }
        section{
            width: 100%;
            .note-item{
                height: 3.2rem;
                border-radius: 0.3rem;
                margin-bottom: 0.64rem;
                box-shadow: 0 0 10px 2px;
                overflow: hidden;
                .title{
                    display: block;
                    margin-top: 0.5337rem;
                    text-align: center;
                    font-size: 0.5337rem;
                    color: #fff;
                }
            }
        }
    }
    .menu{
        width: 100%;
        height: 100%;
        position: absolute;
        transform: translateX(-100%);
        transition: all 0.3s;
        &.show{
            transform: translateX(0%);
        }
    }
}
</style>